<template>
	<view class="page">
			<scroll-view class="sidebar" scroll-y >
				<view class="sidebar-inner">
					<text :data-id="item.id"
					@click='switchPublisher' 
					:class="{'active':item.id == publisherId,'prev':currentIndex == idx+1,'next':currentIndex == idx-1}"  
					v-for="(item, idx) in publishers" 
					:key="idx">{{item.name}}</text>
				</view>
			  
			</scroll-view>
			<!-- right -->
			<scroll-view class="main" scroll-y="true" scroll-with-animation="true" enable-back-to-top="true">
			  <view class="category-group" v-for="(item, idx) in books" :key="idx">
			    <view class="group-header" :id="'catid-' + item.id">
			      {{item.name}}
			    </view>
			    
			  </view>
			</scroll-view>
		</view>
</template>

<script>
	
	export default {
		data() {
			return {
				loading: false,
				publishers: [],
				books: [],
				publisherId: null,
			}
		},
		onShow() {
			
			this.initData();
		},

		onShareAppMessage() {
			return {
				title: '至善学堂',
				path: '/pages/index/index'
			}
		},
		onShareTimeline() {
			return {
				title: '至善学堂'
			}
		},

		computed:{
			/**
			 * 当前选中下标
			 */
			currentIndex: function(){
				var index = 0;
				this.publishers.forEach((item, idx) => {
					if(item.id == this.publisherId){
						index = idx;
					}
				});
				return index;
			}
		},
		methods: {
			/**
			 * 初始化数据
			 */
			initData(){
				
				this.$api.publisherService.findList().then(resp => {
					this.publishers = resp.items;
					if(this.publishers.length > 0){
						this.publisherId = this.publishers[0].id
						this.loadBooks()
					}
				})
			},
			loadBooks(){
				this.$api.bookService.findList({publisherId: this.publisherId}).then(resp=>{
					this.books = resp.items;
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.container {
			display: flex;
			flex-direction: row;
		}
		.page{
			display: flex;
			flex-direction: row;
		}
		
		.sidebar {
			height: 100%;
			width:228rpx;
			
			background: #EFF0F1;
		}
		
		.main{
		  width:522rpx;
		  height:100%;
		  box-sizing: border-box;
		  padding:0rpx 12rpx;
		}
		
		.sidebar-inner{
			background: #FFFFFF;
		}
		
		.sidebar text {
			display: block;
			font-size: 24rpx;
			height:102rpx;
			line-height: 102rpx; 
			color: $uni-text-color;
			text-align: center;
			box-sizing: border-box;
			background: #EFF0F1;
			
		}
		.sidebar text.active{
		  background: #FFFFFF;
		  color: $uni-text-color;
		  font-weight: bold;
		  font-size: 30rpx;
		}
		
		.sidebar text.prev{
			border-radius: 0 0 24rpx 0;
			
		}
		.sidebar text.next{
			border-radius: 0 24rpx 0 0;
			
		}
		
		
		
</style>

